<?php get_header(); ?>

<script>
  $(document).ready(function(){
    $('#smart-archives-block').before('<div class="year-list"><ul><li class="active"></li></ul></div>');
  
    // get year
    $('#smart-archives-block li').each(function(){
      var str = $(this).find('strong a').text();
      $('.year-list ul').append('<li>'+str+'</li>');
      $(this).find('strong').hide();
    });
    
    var t = $('.year-list ul li:nth-child(2)').text();
    $('.year-list ul li:nth-child(2)').addClass('hide');
    $('.year-list ul li:nth-child(1)').text(t);
    $('.year-list ul li:nth-child(1)').append('<img class="year-arrow" src="<?php bloginfo('template_url'); ?>/images/blog-arrow.png" />');
    
    // date custom logic
    var dt = new Date();
    
    $('.blog #smart-archives-block li:nth-child(1) > a, .blog #smart-archives-block li:nth-child(1) > span').each(function(){
      var month;
      switch($(this).text().toUpperCase()){
        case 'JAN': month = 1;break;
        case 'FEB': month = 2;break;
        case 'MAR': month = 3;break;
        case 'APR': month = 4;break;
        case 'MAY': month = 5;break;
        case 'JUN': month = 6;break;
        case 'JUL': month = 7;break;
        case 'AUG': month = 8;break;
        case 'SEP': month = 9;break;
        case 'OCT': month = 10;break;
        case 'NOV': month = 11;break;
        case 'DEC': month = 12;break;
      }
    
      if(month == (dt.getMonth()+1)){
        $(this).addClass('now');
      }else if(month < (dt.getMonth()+1)){
        $(this).addClass('past');
      }
    });
    
    $('.year-list li').click(function(){
      var n = $(this).index();
      if(n < 1){ n = 1; }
      $('#smart-archives-block li').hide();
      $('#smart-archives-block li:nth-child('+(n)+')').show();
      
      var text = $(this).text();
      $('.year-list ul li:nth-child(1)').text(text).append('<img class="year-arrow" src="<?php bloginfo('template_url'); ?>/images/blog-arrow.png" />');
      
      $('.year-list li:nth-child(n+2)').hide();
    });
    
    $('.year-list').hover(function(){
      var el = $(this).find('li');
      el.removeClass('hide');
      
      if(el.text == $('.year-list ul li:nth-child(1)').text()){
        el.addClass('hide');
      }
      
      $(this).find('li').show();
    },function(){
      $(this).find('li:not(.active)').hide();
    });
  });
</script>

<div class="blog">
  <div class="blog-nav">
    <div class="blog-nav-container">
      <span class="title">ARCHIEVE</span>
      
      <?php
        $sar_args = array(
          'format' => 'block',
        );

        $query_args = array(
          'post_type' => 'post',
          'category__in' => array(3)
        );

        smart_archives( $sar_args, $query_args );
      ?>
    </div>
  </div>

  <div class="container">
  
    <?php if (have_posts()) : ?>
 			<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
			<?php while (have_posts()) : the_post(); ?>
        <?php $cat = get_the_category(); 
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
          if($cat[0]->cat_ID == 3){
        ?>
  
    <div class="blog-header">
      <div class="blog-date">
        <div class="round">
          <h1><?php echo strftime('%d',strtotime($post->post_date)); ?></h1>
          <h2><?php echo strftime('%b',strtotime($post->post_date)); ?></h2>
        </div>
      </div>
      <div class="blog-title">
        <span></span>
        <a href="<?php echo get_permalink($post->ID); ?>">
        <h3 style="margin-top: -5px;"><?php the_field('subtitle',$post->ID); ?></h3>
        <h1><?php echo $post->post_title; ?></h1>
        <h3><?php the_field('client',$post->ID); ?></h3>
        </a>
      </div>
      <div class="blog-views">
        <div class="round">
          <h1><?php echo getPostViews($post->ID); ?></h1>
          <h2>views</h2>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="blog-content">
      <div class="blog-pic">
        <img src="<?php echo $feat_image; ?>" class="shadow" />
      </div>
    </div>
    <div class="blog-footer">
      <div class="blog-footer-container">
        <div class="social fr">
          <?php echo do_shortcode('[wpsr_facebook]'); ?>
          <?php echo do_shortcode('[wpsr_retweet]'); ?>
          <?php echo do_shortcode('[wpsr_plusone]'); ?>
        </div>
        <p><?php echo $post->comment_count; ?> comments</p>
      </div>
    </div>
    <hr />
    <?php } ?>
			<?php endwhile; ?>
	<?php endif; ?>
  </div>
</div>

<?php get_footer(); ?>
